<template>
    <div style="height: 100%;width: 100%;">
        <v-card id="head" class="pt-2">
            <v-row no-gutters class="justify-center text-center">
                <v-col cols="2">
                    <v-icon>mdi-chevron-left</v-icon>
                </v-col>
                <v-col>失踪人员dcj(8)</v-col>
                <v-col cols="1">
                    <v-icon>mdi-cards-playing-outline</v-icon>
                </v-col>
                <v-col cols="1">
                    <v-icon>mdi-menu</v-icon>
                </v-col>
            </v-row>
        </v-card>
        <v-main id="main">
            <v-row>
                <v-col cols="2">
                    <v-img src="../assets/zwx.jpg" max-height="40px" contain></v-img>
                </v-col>
                <v-col >
                    <div>18软工郑炜翔</div>
                    <div class="otherMessage">我是傻逼！！</div>
                </v-col>
            </v-row>
            <v-row class="justify-end">
                <v-col cols="8">
                    <div class="text-end">万能的魔术菇</div>
                    <span class="message">换行！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！</span>
                </v-col>
                <v-col cols="2">
                    <v-img src="../assets/touxiang.png" max-height="40px" contain></v-img>
                </v-col>
            </v-row>
            <v-row>
                <v-col cols="2">
                    <v-img src="../assets/zwx.jpg" max-height="40px" contain></v-img>
                </v-col>
                <v-col >
                    <div>18软工郑炜翔</div>
                    <div class="otherMessage">我是傻逼！！</div>
                </v-col>
            </v-row>
            <v-row class="justify-end">
                <v-col cols="8">
                    <div class="text-end">万能的魔术菇</div>
                    <span class="message">换行！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！</span>
                </v-col>
                <v-col cols="2">
                    <v-img src="../assets/touxiang.png" max-height="40px" contain></v-img>
                </v-col>
            </v-row>
            <v-row>
                <v-col cols="2">
                    <v-img src="../assets/zwx.jpg" max-height="40px" contain></v-img>
                </v-col>
                <v-col >
                    <div>18软工郑炜翔</div>
                    <div class="otherMessage">我是傻逼！！</div>
                </v-col>
            </v-row>
            <v-row class="justify-end">
                <v-col cols="8">
                    <div class="text-end">万能的魔术菇</div>
                    <span class="message">换行！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！</span>
                </v-col>
                <v-col cols="2">
                    <v-img src="../assets/touxiang.png" max-height="40px" contain></v-img>
                </v-col>
            </v-row>
            <v-row>
                <v-col cols="2">
                    <v-img src="../assets/zwx.jpg" max-height="40px" contain></v-img>
                </v-col>
                <v-col >
                    <div>18软工郑炜翔</div>
                    <div class="otherMessage">我是傻逼！！</div>
                </v-col>
            </v-row>
            <v-row class="justify-end">
                <v-col cols="8">
                    <div class="text-end">万能的魔术菇</div>
                    <span class="message">换行！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！</span>
                </v-col>
                <v-col cols="2">
                    <v-img src="../assets/touxiang.png" max-height="40px" contain></v-img>
                </v-col>
            </v-row>
            <v-row>
                <v-col cols="2">
                    <v-img src="../assets/zwx.jpg" max-height="40px" contain></v-img>
                </v-col>
                <v-col >
                    <div>18软工郑炜翔</div>
                    <div class="otherMessage">我是傻逼！！</div>
                </v-col>
            </v-row>
            <v-row class="justify-end">
                <v-col cols="8">
                    <div class="text-end">万能的魔术菇</div>
                    <span class="message">换行！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！</span>
                </v-col>
                <v-col cols="2">
                    <v-img src="../assets/touxiang.png" max-height="40px" contain></v-img>
                </v-col>
            </v-row>
            <br>
            <br>
            <br>
        </v-main>
        <v-card id="footer" class="elevation-0">
            <v-row no-gutters class="justify-center text-center">
<!--                <v-col cols="1">-->
<!--                    <v-icon large>mdi-microphone</v-icon>-->
<!--                </v-col>-->
                <v-col cols="8" class="pl-3">
                    <v-textarea
                            prepend-inner-icon="mdi-comment"
                            rows="1"
                            class="pt-0"
                    ></v-textarea>
                </v-col>
                <v-col cols="2">
                    <v-btn fab icon>
                        <v-icon large>mdi-emoticon-happy-outline</v-icon>
                    </v-btn>
                </v-col>
                <v-col cols="2">
<!--                    <v-btn icon fab>-->
<!--                        <v-icon large>mdi-plus-circle-outline</v-icon>-->
<!--                    </v-btn>-->
                    <v-btn color="#01a7ff" class="mt-2">
                        发送
                    </v-btn>
                </v-col>
            </v-row>
        </v-card>
    </div>
</template>

<script>
    export default {
        name: "Chat"
    }
</script>

<style scoped>
    #head{
        position: fixed;
        width: 100%;
        height: 7%;
        min-height: 40px;
        /*background-color: #01baff;*/
        background-image: linear-gradient(to right, #01d8ff , #01a7ff);
    }
    #main{
        position: relative;
        top: 6%;
        height: 86%;
        width: 100%;
    }
    .message{
        background-color: #01d8ff;
        border-radius: 10px;
        width: auto;
        max-width: 100%;
        height: auto;
        display: inline-block;
        word-break: break-all;
        word-wrap: break-word;
        white-space: normal;
        padding: 10px;
    }
    .otherMessage{
        background-color: #979fb4;
        border-radius: 10px;
        width: auto;
        max-width: 100%;
        height: auto;
        display: inline-block;
        word-break: break-all;
        word-wrap: break-word;
        white-space: normal;
        padding: 10px;
    }
    #footer{
        position: fixed;
        bottom: -2%;
        width: 100%;
        height: 10%;
        min-height: 30px;
        background-color: #f5f6fa;
    }
</style>
